<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{role.title.tip}"></title>
    <script th:inline="javascript">
        let _gridWidth;
        let _gridHeight;

        //页面自适应
        function resizePageSize() {
            _gridWidth = $(document).width() - 12;/* -189 是去掉左侧 菜单的宽度， -12是防止浏览器缩小页面 出现滚动条 恢复页面时 折行的问题 */
            _gridHeight = $(document).height() - 65 - 67; /* -65 顶部主菜单高度， -67查询条件高度*/
        }

        $(function () {
            resizePageSize();
            const _columnWidth = (_gridWidth - 75 -150) / 2;
            $("#flexigrid-tabl-id").flexigrid({
                width: _gridWidth,
                height: _gridHeight,
                url: /*[[@{/role/queryRoleListByPage}]]*/"",
                dataType: 'json',
                colModel: [
                    {display: 'roleUuid', name: 'roleUuid', width: 150, sortable: false, align: 'center', hide: 'true'},
                    {
                        display: /*[[#{role.name}]]*/"",
                        name: 'roleName',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{role.remarks}]]*/"",
                        name: 'remarks',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center'
                    },
                    {
                        display: /*[[#{common.operation}]]*/"",
                        name: 'roleUuid',
                        width: 150,
                        sortable: false,
                        align: 'center',
                        process: function (v, _trid, _row) {
                            let contents;
                            if([[${#authorization.expression("hasRole('ROLE_cldk_data_role_menu')")}]]) {
                                contents = '';
                                //用户分配菜单
                                const assignMenuBtn = /*[[#{role.assign.menu}]]*/'';
                                contents +='<a  class="btn" title="' + assignMenuBtn +'" onclick="assignMenuInfo(\'' + v + '\')">';
                                contents +='<i class="glyphicon glyphicon-cd"></i>';
                                contents +='</a>';
                                const deleteBtn = /*[[#{role.delete}]]*/'';
                                contents += '<a  class="btn" title="' + deleteBtn +'" onclick="deleteRoleInfoBtn(\'' + v + '\')">';
                                contents +='<i class="glyphicon glyphicon-trash"></i>';
                                contents += '</div>';
                                const updateBtn = /*[[#{role.update}]]*/'';
                                contents += '<a  class="btn" title="' + updateBtn +'" onclick="modifyRoleInfoById(\'' + v + '\')">';
                                contents +='<i class="glyphicon glyphicon-pencil"></i>';
                                contents += '</div>';
                            }
                            return contents;
                        }
                    }

                ],
                resizable: false, //resizable table 是否可伸缩
                useRp: true,
                usepager: true, //是否分页
                autoload: false, //自动加载，即第一次发起 ajax 请求
                hideOnSubmit: true, //是否在回调时显示遮盖
                showcheckbox: true, //是否显示多选框
                rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击右键等
                rowbinddata: true
            });
            queryTable();

            $("#role-menu-allocate-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{role.menu.allocate}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            const roleId = $("#role-menu-allocate-ztree-id").attr("roleId");
                            const ztreeObj = $.fn.zTree.getZTreeObj("role-menu-allocate-ztree-id");
                            const checkNodes = ztreeObj.getCheckedNodes(true);
                            const menuArray = [];
                            $(checkNodes).each(function (index, item) {
                                menuArray.push(item.id);
                            });
                            $.ajax({
                                    type: 'post',
                                    async: false,
                                    dataType: 'json',
                                    url: /*[[@{/role/saveMenuIdAndRoleId}]]*/'',
                                    data: [{name: "roleUuid", value: roleId},
                                        {name: "menuArray", value: menuArray}],
                                    success: function (data) {
                                        $("#role-menu-allocate-dialog-id").dialog('close');
                                        message(data.msg);
                                    },
                                    error: function (msg) {
                                        message(/*[[#{common.error}]]*/'');
                                    }
                                }
                            );
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
            //查询按钮
            $("#query-user-btn-id").click(function () {
                queryTable();
            });

            //分配菜单对话框
            $("#assign-menu-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{user.assign.roles.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            var menuIdArray = [];
                            var ztreeObj= $.fn.zTree.getZTreeObj("assign-menu-ztree-id");
                            var checkedNodes = ztreeObj.getCheckedNodes(true);
                            $(checkedNodes).each(function (index,item) {
                                menuIdArray.push(item.id);
                            });
                            var roleUuidArray = $("#assign-menu-dialog-id").attr("roleUuidArray");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/role/saveMenuRefRole}]]*/'',
                                data: [{name:"menuIdArray",value:menuIdArray},
                                    {name:"roleUuidArray",value: roleUuidArray}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#assign-menu-dialog-id").dialog('close');
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            //用户详情对话框
            $("#role-detail-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{role.info}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            //修改角色信息对话框
            $("#mod-role-dialog-btn").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{main.mod.role.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            const flag = $("#mod-role-form-id input.form-control").verification()
                            if(!flag){
                                return;
                            }
                            $("#mod-role-form-id").submit()
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            //修改用户信息ajaxFrom请求
            $("#mod-role-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg)
                    if (data.success) {
                        $("#mod-role-dialog-btn").dialog('close')
                        $("#mod-role-form-id").resetForm()
                        queryBtn()
                    } else if (data.code === userNameCode) {
                        $("#mod-roleName-id").addClass("ui-state-error").focus()
                    } else if (data.code === emailCode) {
                        $("#mod-role-remarks-id").addClass("ui-state-error").focus()
                    }

                },
                error: function () {
                    message(/*[[#{common.error}]]*/)
                }
            })

            //批量分配菜单
            $("#assign-menu-btn-id").click(function () {
                const ids = $("#flexigrid-tabl-id").findFlexData(0);
                if (ids.length === 0){
                    message(/*[[#{common.select}]]*/'');
                    return;
                }
                $("#assign-menu-dialog-id").attr("roleUuidArray",ids);

                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/role/queryMenuZtreeAll}]]*/'',
                    data: [
                    ],
                    success: function (data) {
                        $.fn.zTree.init($("#assign-menu-ztree-id"),allocateSetting,data);
                        $("#assign-menu-dialog-id").dialog('open');
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            });

            //增加
            $("#add-role-btn-id").click(function (event) {
                event.stopPropagation();
                $("#add-role-form-id").resetForm();
                $("#add-role-info-dialog-id").dialog('open');
            });
            $("#add-role-info-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{add.role.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function () {
                            const bRst = $("#add-role-form-id.auth").verification();
                            if (!bRst) {
                                return;
                            }
                            $("#add-role-form-id").submit();
                            // $(this).dialog("close");

                        }
                    },

                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });


            //增加角色信息ajaxFrom请求
            $("#add-role-form-id").ajaxForm({
                dataType: 'json',
                success: function (data) {
                    if (data.code === 200) {
                        $("#add-role-info-dialog-id").dialog('close');
                        message(data.msg);
                        queryTable();
                    } else {
                        message(data.msg);
                    }
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            });


        }); //ready

        //查询逻辑
        function queryTable() {
            const roleName = $("#search-role-name-id").val();
            $("#flexigrid-tabl-id").flexOptions({
                extParam: [
                    {name: "roleName", value: roleName}
                ]
            }).flexReload();
        }

        const allocateSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        //分配菜单
        function assignMenuInfo(roleUuid){
            $("#assign-menu-dialog-id").attr("roleUuidArray",roleUuid);

            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/role/queryZtreeByRoleId}]]*/'',
                data: [
                    {name:"roleUuid",value:roleUuid}
                ],
                success: function (data) {
                    $.fn.zTree.init($("#assign-menu-ztree-id"),allocateSetting,data);
                    $("#assign-menu-dialog-id").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });


        }

        //删除
        function deleteRoleInfoBtn(roleUuid) {
            $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{deleteRoleById}]]*/'',
                data: [{
                    name: "roleUuid", value:roleUuid
                }],

                success: function (data) {
                    message(/*[[#{role.delete.info.success}]]*/);
                    queryTable();
                },

                error: function (msg) {
                    message(/*[[#{common.error}]]*/);
                }

            });
        }
        // 修改角色信息
        function modifyRoleInfoById(roleUuid) {
            $("#mod-role-uuid-id").val(roleUuid)
            $.ajax({
                type: 'post',
                dataType: 'json',
                async: false,
                url : /*[[@{/role/queryRoleInfoById}]]*/'',
                data: [{name:'roleUuid', value: roleUuid}],
                success: function (data) {
                    console.log(data)
                    $("#mod-role-dialog-btn").dialog('open')
                    $("#mod-roleName-id").val(data.roleName)
                    $("#mod-role-remarks-id").val(data.remarks)
                },
                error: function (data) {
                    message(/*[[#{common.error}]]*/)
                }

            })
        }
        function rowDbclick(r){
            $(r).dblclick(
                function() {
                    const columnsArray = $(r).attr('ch').split("_FG$SP_");
                    console.info(columnsArray);
                    $("#detail-role-name-id").text(columnsArray[1]);
                    $("#detail-role-nick-id").text(columnsArray[2]);

                    $("#role-detail-dialog-id").dialog("open");
                });
        }



    </script>
</head>
<body>

</body>
<nav>
    <span sec:authorize="hasRole('ROLE_cldk_data_role_query')" th:text="#{role.name}"></span>
    <input sec:authorize="hasRole('ROLE_cldk_data_role_query')" type="text" id="search-role-name-id">
    <!--        查询按钮-->
    <a sec:authorize="hasRole('ROLE_cldk_data_role_query')" id="query-user-btn-id" class="btn">
        <i class="glyphicon glyphicon-search" ></i>
        <span th:text="#{common.query}" ></span>
    </a>
    <a sec:authorize="hasRole('ROLE_cldk_data_role_menu')" id="assign-menu-btn-id" class="btn">
        <i class="glyphicon glyphicon-cd"></i>
        <span th:text="#{user.role.allocate}"></span>
    </a>
    <a sec:authorize="hasRole('ROLE_cldk_data_role_add')" id="add-role-btn-id" class="btn">
        <i class="glyphicon glyphicon-plus-sign"></i>
        <span th:text="#{common.add}"></span>
    </a>
</nav>
<table sec:authorize="hasRole('ROLE_cldk_data_role_query')" id="flexigrid-tabl-id"></table>
<div id="assign-menu-dialog-id" style="display: none">
    <ul id="assign-menu-ztree-id" class="ztree">


    </ul>
</div>


<!-- 增加dialog-->
<div id="add-role-info-dialog-id" style="display: none">
    <form id="add-role-form-id" th:action="@{addroleInfoById}" method="post">

        <div class="form-group">
            <span th:text="#{role.name}"></span>
            <input  name="roleName" type="text" class="form-control auth menu-item"></input>
        </div>

        <div class="form-group">
            <span th:text="#{role.remarks}"></span>
            <input  name="remarks" type="text" class="form-control auth menu-item"></input>
        </div>

    </form>
</div>

<div id="role-detail-dialog-id" style="display: none">
    <div>
        <span th:text="#{role.name}"></span>:
        <span id="detail-role-name-id"></span>
    </div>
    <div>
        <span th:text="#{role.nick}"></span>:
        <span id="detail-role-nick-id"></span>
    </div>
</div>

<div id="mod-role-dialog-btn" style="display: none">
    <form id="mod-role-form-id" method="post" th:action="@{/role/updateRoleById}">
        <div class="form-group">
            <input style="display: none" id="mod-role-uuid-id" name="roleUuid">
            <span th:text="#{role.name}"></span><span style="color: red">*</span>
            <input id="mod-roleName-id" class="form-control" type="text" name="roleName" pattern="^[\u4e00-\u9fa5]{0,}$" th:title="#{main.role.pattern}">
        </div>
        <div class="form-group">
            <span th:text="#{role.remarks}"></span><span style="color: red">*</span>
            <input class="form-control" type="text" name="remarks" id="mod-role-remarks-id" pattern="^[\u4e00-\u9fa5]{0,}$" th:title="#{main.role.pattern}">
        </div>
    </form>
</div>
</html>